<template>
  <div>
    <el-dialog
      title="找回密码"
      :visible="dialogPhoneVisible"
      @close="dialogCloseFn()"
      center
      width=400px
      :show-close=false
    >
      <el-form
        status-icon
        :model="backForm"
        ref="backForm"
        :rules="backRules"
      >
        <el-form-item
          label="手机号"
          prop='phone'
        >
          <el-input
            v-model.trim="backForm.phone"
            clearable
            minlength="11"
            maxlength="11"
            show-word-limit
            @keyup.enter.native="confirmFn()"
          ></el-input>
        </el-form-item>
        <el-form-item prop='type'>
          <el-radio-group v-model="backForm.type">
            <el-radio :label="1">学生</el-radio>
            <el-radio :label="2">维修人员</el-radio>
            <el-radio :label="3">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="cancelFn()">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmFn()"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sendCodeAPI } from '@/api'
export default {
  name: 'myBack',
  props: {
    dialogPhoneVisible: Boolean
  },
  data () {
    return {
      backForm: {
        phone: '',
        type: 1
      },
      backRules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'change' },
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    // 点击取消按钮 -> 点击事件
    cancelFn () {
      this.$emit('update:dialogPhoneVisible', false)
    },
    // 点击确定按钮 -> 点击事件
    confirmFn () {
      this.$refs.backForm.validate(async (valid) => {
        if (valid) {
          try {
            const { success, code } = await sendCodeAPI(this.backForm)
            if (success && code === 10000) {
              success && this.$emit('codeEV', { ...this.backForm })
              this.backForm.phone = ''
              this.$emit('update:dialogPhoneVisible', false)
            }
          } catch (err) {
            return console.dir(err)
          }
        }
      })
    },
    // 弹窗关闭 -> 回调函数
    dialogCloseFn () {
      // 清空表单
      this.backForm.phone = ''
      this.$refs.backForm?.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
